<template>
  <view class="record-detail">
    <view class="btn-wrap record-btn">
      <view
        class="normal-btn default-btn"
        :class="btnColor"
        @click="handleClick"
        >{{ statusText }}</view
      >
    </view>
    <view class="item-wrap">
      <view class="left-line" :class="btnColor"></view>
      <view class="m-l-10">
        <view>
          <text>出发时间：{{ recordInfo.startTime }}</text>
          <text>返回时间：{{ recordInfo.endTime }}</text>
        </view>
        <view>
          <text>部门：{{ recordInfo.deptName }}</text>
          <text>交通工具：{{ recordInfo.vehicle }}</text>
        </view>
        <view>出差地点：{{ recordInfo.place }}</view>
        <view>出差人员：{{ recordInfo.personnel }}</view>
      </view>
    </view>
    <view class="item-wrap">
      <view>出差事由：</view>
      <view>{{ recordInfo.reason }}</view>
    </view>
    <view class="item-wrap">
      <view>审批流程：</view>
      <view v-for="item in historyFlow" :key="item.id" style="color: #bbb"
        >{{ item.activityName }}：{{ item.comment }}</view
      >
    </view>
    <view class="page-footer">
      <button type="normal" @click="handleBack()">返回上一页</button>
    </view>
  </view>
</template>

<script>
import config from '@/config/config';
export default {
  name: "record-detail",
  components: {},
  data() {
    return {
      recordInfo: {
        startTime: "",
        endTime: "",
        deptName: "",
        vehicle: "",
        place: "",
        personnel: "",
      },
      historyFlow: [],
    };
  },
  computed: {
    statusText() {
      if (this.recordInfo.approvalStatus == 0) {
        return "审批中";
      } else if (this.recordInfo.approvalStatus == 1) {
        return "已审批";
      } else if (this.recordInfo.approvalStatus == 2) {
        return "已拒绝";
      }
    },
    btnColor() {
      if (this.recordInfo.approvalStatus == 0) {
        return "left-red";
      } else if (this.recordInfo.approvalStatus == 1) {
        return "left-blue";
      } else if (this.recordInfo.approvalStatus == 2) {
        return "left-gray";
      }
    },
  },
  onLoad(option) {
	  config.verifyToken()
    this.getRecordInfo(option.id);
    this.getApplyFlow(option.id);
  },
  methods: {
    // 获取详细信息
    getRecordInfo(id) {
      this.$http
        .get(`/activiti/trip/${id}`)
        .then((res) => {
          this.recordInfo = res.data;
        })
        .catch((errorData) => {
          console.log(errorData);
        });
    },
    // 获取审批信息
    getApplyFlow(id) {
      this.$http
        .post(`/process/listHistory?instanceId=${id}`)
        .then((res) => {
          this.historyFlow = res.rows;
        })
        .catch((errorData) => {
          console.log(errorData);
        });
    },
    // 返回上一页
    handleBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.record-detail {
  .record-btn {
    justify-content: flex-end;
    padding: 10px 0;
  }
  .item-wrap {
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 28upx;
    text {
      display: inline-block;
      width: 50%;
    }
  }
}
</style>
